<div id="container">
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
    文字 文字 文字 文字 文字 文字 文字 文字
</div>
<div id="dragable" style="width: 100px;height: 100px;background-color: pink;display: inline-block;"></div>

<script>
    let dragable = document.getElementById('dragable');
    let container = document.getElementById('container');

    let baseX = 0, baseY = 0;

    dragable.addEventListener('mousedown', (event) => {
        let startX = event.clientX;
        let startY = event.clientY;

        let move = (event) => {
            // dragable.style.transform = `translate(${baseX + event.clientX - startX}px, ${baseY + event.clientY - startY}px)`;
            let range = getNearest(event.clientX, event.clientY);
            range.insertNode(dragable);
        };

        let up = (event) => {
            baseX += event.clientX - startX;
            baseY += event.clientY - startY;
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', up);
        }

        document.addEventListener('mousemove', move);

        document.addEventListener('mouseup', up);
    });


    let ranges = [];

    for (let i = 0;i < container.childNodes[0].textContent.length; i += 1) {
        let range = document.createRange();
        range.setStart(container.childNodes[0], i);
        range.setEnd(container.childNodes[0], i);
        ranges.push(range);
    }

    function getNearest(x, y) {
        let min = Infinity; // 无穷大的数
        let nearest = null;

        for (let range of ranges) {
            let rect = range.getBoundingClientRect();
            let distance = (rect.x - x)**2 + (rect.y - y)**2;
            if (distance < min) {
                nearest = range;
                min = distance;
            } 
        }

        return nearest;
    }


    document.addEventListener('selectstart', (event) => {
        event.preventDefault();
    });

</script>